<template>
  <div>
<!--    图片-->
    <div><h2>美味食材</h2>
    </div>
    <div class="dv1">
      <van-image
          width="95%"
          src="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
          @click="change1()"
      />

    </div>
    <div class="dv1">

      <van-row align="center">
        <van-col span="16"><van-card
            price="20.00"
            desc="美味食材，好吃不贵。"
            title="食材"
            thumb="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
            @click-thumb="change1()"
        >
          <template #footer>
            <van-button size="small" @click="change1()"><van-icon name="shopping-cart" color="green" size="20px"/></van-button>
          </template>
        </van-card></van-col>
        <van-col span="8">
          <van-image
              round
              width="3rem"
              height="3rem"
              position="left"
              src="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
              @click="change1()"
          />
          <van-button type="default" size="mini" @click="change1()">全部商品</van-button>

        </van-col>
      </van-row>
    </div>
    <div class="dv1">
      <van-image
          width="95%"
          src="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
          @click="change1()"
      />

    </div>
    <div class="dv1">

      <van-row align="center">
        <van-col span="16"><van-card
            price="20.00"
            desc="美味食材，好吃不贵。"
            title="食材"
            thumb="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
            @click-thumb="change1()"
        >
          <template #footer>
            <van-button size="small" @click="change1()"><van-icon name="shopping-cart" color="green" size="20px"/></van-button>
          </template>
        </van-card></van-col>
        <van-col span="8">
          <van-image
              round
              width="3rem"
              height="3rem"
              position="left"
              src="https://img2.baidu.com/it/u=400297310,2101193867&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=371"
              @click="change1()"
          />
          <van-button type="default" size="mini" @click="change1()">全部商品</van-button>

        </van-col>
      </van-row>
    </div>
<!--    弹出层-->
    <div>
      <van-action-sheet v-model:show="show" title="主料">
        <div class="content">
          <van-grid direction="horizontal" :column-num="foods.length" border="2px" v-for="f in foods">
            <van-card
                :price="f.price"
                :desc="f.info"
                title="商品标题"
                :thumb="f.img"
            >
              <template #footer>
                <van-icon name="shopping-cart" color="green" size="20px" @click="addFoods(f)"/>
              </template>
            </van-card>

          </van-grid>

        </div>
        <div class="dv3">
          <van-icon name="cart" color="green" size="30px" :badge="num"/>
        </div>
      </van-action-sheet>

    </div>
  </div>
</template>

<script>
export default {
  name: "BuyFoodView",
  data(){
    return{
      show:false,
      foods:[],
      gid:1,
      num:0,
      food:{}
    }
  },
  mounted() {
    this.start();
  },
  methods:{
    change1(){
      if (!this.show) {
        this.show=true;
      }
    },
    start(){
      this.axios.get("/food/queryfoods.do?gid="+this.gid).then(r=>{
        if (r.data.code==200) {
          this.foods=r.data.data;
        } else {
          this.$toast("出错了")
        }
      })
    },
    addFoods(f){
      this.num+=1;
      this.axios.post("/food/addcar.do?num="+1+"&id="+f.id).then(r=>{
        if (r.data.code==200) {
          this.$toast("添加成功！")
        } else {
          this.$toast("好像出问题了")
        }
      })
    }
  }
}
</script>

<style scoped>
.dv1{
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.dv2{
  background-color: ghostwhite;
  width: 70%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.dv3{
  width: 40px;
  margin-bottom: 10px;
  margin-left: 350px;
}
.content {
  padding: 16px 16px 160px;
}
</style>